<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适应屏幕 -->
    <title>财运合同管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Font Awesome 图标库 -->
    <style>
        body {
            font-family: 'Segoe UI', 'UKIJ Ekran', sans-serif; /* 字体设置 */
            background-color: #343a40; /* 深色背景 */
            color: #ffffff; /* 白色字体 */
            line-height: 1.6; /* 行高 */
            margin: 0; /* 去掉默认边距 */
            padding: 0; /* 去掉默认内边距 */
            display: flex; /* 使用弹性布局 */
            flex-direction: column; /* 垂直方向布局 */
            justify-content: space-between; /* 上下分布 */
            height: 100vh; /* 使页面高度占满视口 */
        }
        .container {
            max-width: 1200px; /* 最大宽度 */
            width: 100%; /* 容器宽度自适应 */
            margin: 20px auto; /* 上下外边距，左右自动 */
            padding: 20px; /* 内边距 */
            background-color: #495057; /* 深色容器 */
            border-radius: 8px; /* 圆角 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            text-align: right; /* 右对齐 */
        }
        .header {
            font-size: 24px; /* 标题字体大小 */
            font-weight: bold; /* 粗体 */
            margin-bottom: 20px; /* 下边距 */
			text-align: center;
        }
        .login-container, .content-wrapper {
            max-width: 100%; /* 适应屏幕宽度 */
            margin: 20px auto; /* 上下外边距，左右自动 */
            padding: 20px; /* 内边距 */
            background: #6c757d; /* 深灰色 */
            border-radius: 8px; /* 圆角 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影效果 */
        }
        .form-group {
            margin-bottom: 15px; /* 下边距 */
        }
        .form-group label {
            display: block; /* 标签块级显示 */
            margin-bottom: 5px; /* 下边距 */
        }
        .form-group input, .form-group select {
            width: 100%; /* 宽度100% */
            padding: 8px; /* 内边距 */
            box-sizing: border-box; /* 包含边框和内边距 */
            border: 1px solid #ccc; /* 边框 */
            border-radius: 4px; /* 圆角 */
        }
        .btn {
            display: inline-block; /* 行内块元素 */
            padding: 10px 15px; /* 内边距 */
            color: #fff; /* 字体颜色 */
            background-color: #007bff; /* 蓝色按钮 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 圆角 */
            cursor: pointer; /* 鼠标指针 */
            text-align: center; /* 中间对齐 */
            text-decoration: none; /* 无下划线 */
            font-size: 16px; /* 字体大小 */
            margin: 5px; /* 边距 */
        }
        .btn-dark {
            background-color: #343a40; /* 深色按钮 */
        }
        .btn-danger {
            background-color: #dc3545; /* 红色按钮 */
        }
        .error-message {
            color: #dc3545; /* 红色错误提示 */
            margin-top: 10px; /* 上边距 */
            display: none; /* 默认隐藏 */
        }
        table {
            width: 100%; /* 表格宽度100% */
            border-collapse: collapse; /* 合并边框 */
            margin-top: 10px; /* 上边距 */
        }
        th, td {
            padding: 10px; /* 内边距 */
            border: 1px solid #ddd; /* 边框 */
            text-align: right; /* 右对齐 */
        }
        th {
            background-color: #495057; /* 深色表头 */
        }
        .button-group {
            margin-top: 20px; /* 上边距 */
            display: flex; /* 使用弹性布局 */
            justify-content: space-between; /* 左右分布 */
            flex-wrap: wrap; /* 换行 */
            align-items: center; /* 垂直居中 */
        }
        .footer {
            clear: both; /* 清除浮动 */
            text-align: center; /* 中间对齐 */
            margin-top: 20px; /* 上边距 */
            font-size: 12px; /* 字体大小 */
            color: #ccc; /* 字体颜色 */
        }
        .customer-type {
            display: flex; /* 使用弹性布局 */
            justify-content: space-between; /* 均匀分布 */
            margin-top: 10px; /* 上边距 */
        }
        .customer-type label {
            margin: 0 10px; /* 左右边距 */
        }
        @font-face {
            font-family: 'alkatip';
            src: url('path/to/alkatip.ttf') format('truetype'); /* 请替换为实际字体文件路径 */
        }
        .uyghur-text {
            font-family: 'alkatip', sans-serif; /* 使用alkatip字体 */
        }
		 body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        footer {
            background-color: #2e3a3c;
            text-align: center;
            padding: 5px;
            position: relative;
            bottom: 0;
            width: 100%;
        }
        footer p {
            margin: 5px 0;
        }
    </style>
    </style>
</head>
<body>
    <div class="container">
        <div class="header">财运综合业务合同管理系统</div>
        
        <div class="login-container" id="loginContainer">
            <h2>登录</h2>
            <h2 class="uyghur-text">كىرىش</h2>
            <form id="loginForm">
                <div class="form-group">
                    <label>用户名</label>
                    <label class="uyghur-text">قوللانچى نامى</label>
                    <input type="text" id="username" required>
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <label class="uyghur-text">پارول</label>
                    <input type="password" id="password" required>
                </div>
                <button type="submit" class="btn">登录</button>
                <div class="error-message" id="errorMessage">账号或密码错误</div> <!-- 错误提示 -->
            </form>
        </div>

        <div class="content-wrapper" id="contentWrapper" style="display: none;">
            <div class="form-section">
                <h2 id="formTitle">客户信息录入</h2>
                <h2 id="formTitle" class="uyghur-text">خىردار ئۇچۇرىنى كىرگۈزۈش</h2>
                
                <!-- 添加搜索功能 -->
                <div class="form-group">
                    <label for="searchInput">搜索合同信息</label>
                    <input type="text" id="searchInput" placeholder="输入客户名称或合同编号">
                    <button id="searchBtn" class="btn">搜索</button>
                </div>

                <form id="customerForm">
                    <div class="form-group">
                        <label id="customerNameLabel">客户名称</label>
                        <label id="customerNameLabel" class="uyghur-text">خىردار نامى</label>
                        <input type="text" id="customerName" required>
                    </div>
                    <div class="form-group">
                        <label id="customerTypeLabel">客户类型</label>
                        <label id="customerTypeLabel" class="uyghur-text">خىردار تىپى</label>
                        <select id="customerType" required>
                            <option value="企业">شىركەت</option>
                            <option value="合作社">كوپىراتىپ</option>
                            <option value="个体户">يەككە</option>
                            <option value="其他">باشقا</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label id="signDateLabel">合同签署日期</label>
                        <label id="signDateLabel" class="uyghur-text">باشلانغان ۋاقتى</label>
                        <input type="date" id="signDate" required>
                    </div>
                    <div class="form-group">
                        <label id="dueDateLabel">合同到期日期</label>
                        <label id="dueDateLabel" class="uyghur-text">ئاخىرلىشىش ۋاقتى</label>
                        <input type="date" id="dueDate" required>
                    </div>
                    <div class="form-group">
                        <label id="businessTypeLabel">服务类型</label>
                        <label id="businessTypeLabel" class="uyghur-text">كەسىپ تۈرى</label>
                        <div class="form-group">
                            <label for="mainBusinessType">主要业务类型</label>
                            <select id="mainBusinessType" required>
                                <option value="">请选择主要业务类型</option>
                                <option value="财务服务">财务服务</option>
                                <option value="咨询服务">咨询服务</option>
                                <option value="销售服务">销售服务</option>
                                <option value="管理服务">管理服务</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="subBusinessType">تارماق تۈر</label>
                            <select id="subBusinessType" required>
                                <option value="">تارماق تۈرنى تاللاڭ</option>
                                <option class="financial" value="代理记账">代理记账</option>
                                <option class="financial" value="税务服务">税务服务</option>
                                <option class="financial" value="财务咨询">财务咨询</option>
                                <option class="consulting" value="企业管理咨询">企业管理咨询</option>
                                <option class="consulting" value="市场营销策划">市场营销策划</option>
                                <option class="consulting" value="信息咨询服务">信息咨询服务</option>
                                <option class="sales" value="纸制品销售">纸制品销售</option>
                                <option class="sales" value="办公用品销售">办公用品销售</option>
                                <option class="sales" value="电子产品销售">电子产品销售</option>
                                <option class="management" value="物业管理">物业管理</option>
                                <option class="management" value="家政服务">家政服务</option>
                                <option class="management" value="版权代理">版权代理</option>
                                <option class="management" value="商标代理">商标代理</option>
                                <option class="management" value="采购代理服务">采购代理服务</option>
                                <option class="management" value="商务代理代办服务">商务代理代办服务</option>
                                <option class="management" value="其他文化艺术经纪代理">其他文化艺术经纪代理</option>
                                <option class="management" value="文化娱乐经纪人服务">文化娱乐经纪人服务</option>
                                <option class="management" value="文物文化遗址保护服务">文物文化遗址保护服务</option>
                                <option class="management" value="非物质文化遗产保护">非物质文化遗产保护</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label id="contractPriceLabel">合同价格</label>
                        <label id="contractPriceLabel" class="uyghur-text">توختام ھەققى</label>
                        <input type="number" id="contractPrice" required>
                    </div>
                    <div class="form-group">
                        <label id="actualPaidLabel">实际支付</label>
                        <label id="actualPaidLabel" class="uyghur-text">تاپشۇرغان ھەق</label>
                        <input type="number" id="actualPaid" required>
                    </div>
                    <button type="submit" class="btn">保存</button>
                </form>
            </div>

            <table id="customerTable">
                <thead>
                    <tr>
                        <th>客户名称</th>
                        <th>客户类型</th>
                        <th>合同签署日期</th>
                        <th>合同到期日期</th>
                        <th>服务类型</th>
                        <th>合同价格</th>
                        <th>实际支付</th>
                        <th>欠费</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 客户信息将插入到这里 -->
                </tbody>
            </table>

            <div class="button-group">
                <button id="exportExcelBtn" class="btn btn-dark">导出Excel</button>
                <button id="importCustomerBtn" class="btn btn-dark">导入客户信息</button>
                <button id="uploadDataBtn" class="btn btn-dark">上传客户数据</button>
                <button id="generateReportBtn" class="btn btn-dark">生成收费报告</button>
                <button id="backupDataBtn" class="btn btn-dark">数据备份</button>
                <button id="exitBtn" class="btn btn-danger">退出</button>
            </div>
        </div>
    </div>

    <script>
        // 从本地存储加载合同数据
        const loadContracts = () => {
            const contracts = JSON.parse(localStorage.getItem('contracts')) || [];
            contracts.forEach(contract => {
                addContractToTable(contract);
            });
        };

        // 将合同添加到表格
        const addContractToTable = (contract) => {
            const newRow = document.getElementById('customerTable').insertRow();
            newRow.innerHTML = `
                <td>${contract.customerName}</td>
                <td>${contract.customerType}</td>
                <td>${contract.signDate}</td>
                <td>${contract.dueDate}</td>
                <td>${contract.businessType}</td>
                <td>${contract.contractPrice}</td>
                <td>${contract.actualPaid}</td>
                <td>${contract.contractPrice - contract.actualPaid}</td>
                <td>
                    <button class="btn btn-danger" onclick="confirmDelete(this)"><i class="fas fa-trash-alt"></i> 删除</button>
                    <button class="btn" onclick="printContract('${contract.customerName}', '${contract.businessType}', '${contract.signDate}', '${contract.dueDate}', '合同编号')">打印</button>
                </td>
            `;
        };

        // 登录功能
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止默认提交行为
            const username = document.getElementById('username').value; // 获取用户名
            const password = document.getElementById('password').value; // 获取密码

            // 检查用户名和密码
            if (username === 'admin' && password === 'admin123') {
                document.getElementById('loginContainer').style.display = 'none'; // 隐藏登录容器
                document.getElementById('contentWrapper').style.display = 'block'; // 显示内容容器
                document.getElementById('errorMessage').style.display = 'none'; // 隐藏错误信息

                // 加载合同数据
                loadContracts();
            } else {
                document.getElementById('errorMessage').style.display = 'block'; // 显示错误信息
            }
        });

        // 保存合同信息
        document.getElementById('customerForm').addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止默认提交行为
            const customerName = document.getElementById('customerName').value; // 获取客户名称
            const customerType = document.getElementById('customerType').value; // 获取客户类型
            const signDate = document.getElementById('signDate').value; // 获取合同签署日期
            const dueDate = document.getElementById('dueDate').value; // 获取合同到期日期
            const businessType = document.getElementById('subBusinessType').value; // 获取服务类型
            const contractPrice = document.getElementById('contractPrice').value; // 获取合同价格
            const actualPaid = document.getElementById('actualPaid').value; // 获取实际支付

            // 创建新合同对象
            const newContract = {
                customerName,
                customerType,
                signDate,
                dueDate,
                businessType,
                contractPrice: parseFloat(contractPrice),
                actualPaid: parseFloat(actualPaid)
            };

            // 添加到表格
            addContractToTable(newContract);

            // 保存到本地存储
            const contracts = JSON.parse(localStorage.getItem('contracts')) || [];
            contracts.push(newContract);
            localStorage.setItem('contracts', JSON.stringify(contracts));

            // 清空表单
            document.getElementById('customerForm').reset();
        });

        // 确认删除的函数
        function confirmDelete(button) {
            if (confirm("确定要删除这条记录吗？")) { // 弹出确认框
                const row = button.parentNode.parentNode; // 获取当前行
                const customerName = row.cells[0].innerText; // 获取客户名称
                const contracts = JSON.parse(localStorage.getItem('contracts')) || [];
                const updatedContracts = contracts.filter(contract => contract.customerName !== customerName);
                localStorage.setItem('contracts', JSON.stringify(updatedContracts)); // 更新本地存储
                row.parentNode.removeChild(row); // 删除行
            }
        }

        // 搜索功能
        document.getElementById('searchBtn').addEventListener('click', function() {
            const searchValue = document.getElementById('searchInput').value.toLowerCase();
            const rows = document.querySelectorAll('#customerTable tbody tr');

            rows.forEach(row => {
                const cells = row.getElementsByTagName('td');
                let found = false;

                for (let i = 0; i < cells.length; i++) {
                    if (cells[i].innerText.toLowerCase().includes(searchValue)) {
                        found = true;
                        break;
                    }
                }

                if (found) {
                    row.style.display = ''; // 显示行
                } else {
                    row.style.display = 'none'; // 隐藏行
                }
            });
        });

        // 导出Excel功能
        document.getElementById('exportExcelBtn').addEventListener('click', function() {
            const table = document.getElementById('customerTable');
            const rows = Array.from(table.rows);
            let csvContent = "data:text/csv;charset=utf-8,";

            rows.forEach(row => {
                const cols = Array.from(row.cells).map(cell => cell.innerText);
                csvContent += cols.join(",") + "\n";
            });

            const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "客户信息.csv");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });

        // 导入客户信息功能
        document.getElementById('importCustomerBtn').addEventListener('click', function() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.csv';
            input.onchange = e => {
                const file = e.target.files[0];
                const reader = new FileReader();
                reader.onload = function(event) {
                    const data = event.target.result.split('\n');
                    data.forEach(row => {
                        const columns = row.split(',');
                        const newRow = document.getElementById('customerTable').insertRow();
                        newRow.innerHTML = `
                            <td>${columns[0]}</td>
                            <td>${columns[1]}</td>
                            <td>${columns[2]}</td>
                            <td>${columns[3]}</td>
                            <td>${columns[4]}</td>
                            <td>${columns[5]}</td>
                            <td>${columns[4] - columns[5]}</td>
                            <td>
                                <button class="btn btn-danger" onclick="confirmDelete(this)"><i class="fas fa-trash-alt"></i> 删除</button>
                                <button class="btn" onclick="printContract('${columns[0]}', '${columns[3]}', '${columns[1]}', '${columns[2]}', '合同编号')">打印</button>
                            </td>
                        `;
                    });
                };
                reader.readAsText(file);
            };
            input.click();
        });

        // 上传客户数据功能
        document.getElementById('uploadDataBtn').addEventListener('click', function() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.csv';
            input.onchange = e => {
                const file = e.target.files[0];
                const reader = new FileReader();
                reader.onload = function(event) {
                    const data = event.target.result.split('\n');
                    data.forEach(row => {
                        const columns = row.split(',');
                        const newRow = document.getElementById('customerTable').insertRow();
                        newRow.innerHTML = `
                            <td>${columns[0]}</td>
                            <td>${columns[1]}</td>
                            <td>${columns[2]}</td>
                            <td>${columns[3]}</td>
                            <td>${columns[4]}</td>
                            <td>${columns[5]}</td>
                            <td>${columns[4] - columns[5]}</td>
                            <td>
                                <button class="btn btn-danger" onclick="confirmDelete(this)"><i class="fas fa-trash-alt"></i> 删除</button>
                                <button class="btn" onclick="printContract('${columns[0]}', '${columns[3]}', '${columns[1]}', '${columns[2]}', '合同编号')">打印</button>
                            </td>
                        `;
                    });
                };
                reader.readAsText(file);
            };
            input.click();
        });

        // 生成收费报告功能
        document.getElementById('generateReportBtn').addEventListener('click', function() {
            const contracts = JSON.parse(localStorage.getItem('contracts')) || [];
            let reportContent = "客户名称,客户类型,合同签署日期,合同到期日期,服务类型,合同价格,实际支付,欠费\n";

            contracts.forEach(contract => {
                reportContent += `${contract.customerName},${contract.customerType},${contract.signDate},${contract.dueDate},${contract.businessType},${contract.contractPrice},${contract.actualPaid},${contract.contractPrice - contract.actualPaid}\n`;
            });

            const encodedUri = encodeURI("data:text/csv;charset=utf-8," + reportContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "收费报告.csv");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });

        // 数据备份功能
        document.getElementById('backupDataBtn').addEventListener('click', function() {
            const contracts = JSON.parse(localStorage.getItem('contracts')) || [];
            const backupContent = JSON.stringify(contracts);
            const encodedUri = encodeURI("data:text/json;charset=utf-8," + backupContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "数据备份.json");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });

        // 退出功能
        document.getElementById('exitBtn').addEventListener('click', function() {
            if (confirm("确定要退出吗？")) {
                window.location.reload(); // 刷新页面
            }
        });

        // 三级下拉选择逻辑
        const subBusinessType = document.getElementById('subBusinessType');
        const mainBusinessType = document.getElementById('mainBusinessType');

        const descriptions = {
            "代理记账": "为企业提供会计核算、报税申报、财务报表编制等服务。需要依法经过相关部门的批准，并取得相应的许可证才能开展经营活动。",
            "税务服务": "为企业提供税务筹划、税务咨询、税务申报等服务，帮助企业合理避税和降低税收风险。",
            "财务咨询": "为企业提供财务管理、财务规划、财务分析等方面的咨询服务，帮助企业优化财务状况和提高经济效益。",
            "企业管理咨询": "为企业提供组织架构设计、人力资源管理、战略规划等方面的咨询服务，帮助企业提升管理水平和竞争力。",
            "市场营销策划": "为企业提供市场调研、品牌推广、广告策划等服务，帮助企业提升市场份额和品牌影响力。",
            "信息咨询服务": "为客户提供各类信息咨询，如市场调研、行业分析、竞争情报等，帮助企业了解市场动态和制定战略决策。",
            "物业管理": "为住宅小区、商业写字楼等提供物业管理服务，包括维修保养、清洁卫生、安全管理等方面。",
            "家政服务": "为家庭提供保洁、保姆、月嫂等家政服务，满足家庭日常生活需求。",
            "纸制品销售": "销售各类纸制品，如办公用纸、打印纸、包装纸等。",
            "办公用品销售": "销售各类办公用品，如文具、文件夹、打印耗材等。",
            "电子产品销售": "销售各类电子产品，如手机、电脑、电视等。",
            "版权代理": "为企业或个人提供版权申请、维权等服务，保护知识产权。",
            "商标代理": "为企业提供商标注册、维权等服务，保护商标权益。"
        };
    </script>
</html>
</body>

    <footer>
        <p>开发公司：喀什财运商标代理有限责任公司</p>
        <p>
            官网：<a href="http://talay.biz" target="_blank">talay.biz</a>
        </p>
        <p>联系电话：16699944436</p>
        <p>版权信息 &copy; 2023 喀什财运商标代理有限责任公司. 保留所有权利。</p>
        <p>未经授权，禁止转载或使用本网站内容。</p>
    </footer>
</body>
</html>